<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蜜雪冰城全国门店销售数据分析</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }
        
        body {
            background-color: #0a1a35;
            color: #fff;
            overflow-x: hidden;
        }
        
        .container {
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, #0a1a35 0%, #1a3a6a 100%);
            min-height: 100vh;
        }
        
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            background: rgba(10, 30, 60, 0.8);
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(64, 158, 255, 0.2);
        }
        
        .title {
            display: flex;
            align-items: center;
        }
        
        .logo {
            width: 50px;
            height: 50px;
            background-color: #ff6b6b;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            box-shadow: 0 0 15px rgba(255, 107, 107, 0.5);
        }
        
        .logo i {
            font-size: 24px;
            color: white;
        }
        
        .title-text h1 {
            font-size: 28px;
            margin-bottom: 5px;
            background: linear-gradient(90deg, #ff6b6b, #ffa36b);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .title-text p {
            font-size: 14px;
            color: #a0c0e0;
        }
        
        .datetime {
            text-align: right;
        }
        
        .datetime .date {
            font-size: 18px;
            margin-bottom: 5px;
        }
        
        .datetime .time {
            font-size: 24px;
            font-weight: bold;
            color: #ffa36b;
        }
        
        .nav-tabs {
            display: flex;
            background: rgba(16, 36, 71, 0.8);
            border-radius: 10px;
            margin-bottom: 20px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }
        
        .nav-tab {
            flex: 1;
            padding: 15px 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            border-bottom: 3px solid transparent;
            font-weight: 500;
        }
        
        .nav-tab:hover {
            background: rgba(255, 107, 107, 0.1);
        }
        
        .nav-tab.active {
            background: rgba(255, 107, 107, 0.2);
            border-bottom: 3px solid #ff6b6b;
            color: #ffa36b;
        }
        
        .nav-tab i {
            margin-right: 8px;
        }
        
        .page {
            display: none;
        }
        
        .page.active {
            display: block;
            animation: fadeIn 0.5s ease-in-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .stats {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        
        .stat-card {
            flex: 1;
            background: rgba(16, 36, 71, 0.8);
            border-radius: 10px;
            padding: 20px;
            margin: 0 10px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(64, 158, 255, 0.1);
            transition: transform 0.3s;
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
        }
        
        .stat-card:first-child {
            margin-left: 0;
        }
        
        .stat-card:last-child {
            margin-right: 0;
        }
        
        .stat-card i {
            font-size: 30px;
            margin-bottom: 15px;
            color: #ffa36b;
        }
        
        .stat-card .value {
            font-size: 28px;
            font-weight: bold;
            margin: 10px 0;
            color: #ff6b6b;
        }
        
        .stat-card .label {
            font-size: 14px;
            color: #a0c0e0;
        }
        
        .content {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }
        
        .chart-container {
            flex: 1;
            min-width: 48%;
            background: rgba(16, 36, 71, 0.8);
            border-radius: 10px;
            padding: 20px;
            margin: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(64, 158, 255, 0.1);
        }
        
        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .chart-title {
            font-size: 18px;
            color: #ffa36b;
        }
        
        .chart {
            height: 300px;
            width: 100%;
        }
        
        .full-width {
            width: 100%;
            min-width: 98%;
        }
        
        .half-width {
            width: 49%;
            min-width: 49%;
        }
        
        .footer {
            text-align: center;
            padding: 15px;
            color: #a0c0e0;
            font-size: 14px;
            background: rgba(10, 30, 60, 0.8);
            border-radius: 10px;
            margin-top: 10px;
        }
        
        .trend {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 12px;
            margin-left: 10px;
        }
        
        .trend.up {
            background-color: rgba(76, 175, 80, 0.2);
            color: #4caf50;
        }
        
        .trend.down {
            background-color: rgba(244, 67, 54, 0.2);
            color: #f44336;
        }
        
        .ranking-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }
        
        .ranking-table th {
            background: rgba(255, 107, 107, 0.2);
            padding: 12px 15px;
            text-align: left;
            font-weight: 600;
            color: #ffa36b;
            border-bottom: 2px solid rgba(255, 255, 255, 0.1);
        }
        
        .ranking-table td {
            padding: 12px 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .ranking-table tr:hover {
            background: rgba(255, 255, 255, 0.05);
        }
        
        .ranking-badge {
            display: inline-block;
            width: 24px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            border-radius: 50%;
            background: #ff6b6b;
            color: white;
            font-size: 12px;
            font-weight: bold;
        }
        
        .badge-1 { background: #ff6b6b; }
        .badge-2 { background: #ff8e8e; }
        .badge-3 { background: #ffb6b9; color: #2d3047; }
        
        .warning-critical { color: #f56c6c; font-weight: bold; }
        .warning-warning { color: #e6a23c; font-weight: bold; }
        .warning-normal { color: #67c23a; }
        
        @media (max-width: 1200px) {
            .chart-container {
                min-width: 100%;
            }
            .half-width {
                min-width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="title">
                <div class="logo">
                    <i class="fas fa-snowflake"></i>
                </div>
                <div class="title-text">
                    <h1>蜜雪冰城全国门店销售数据分析</h1>
                    <p>基于12个核心数据表的全链路分析平台</p>
                </div>
            </div>
            <div class="datetime">
                <div class="date" id="currentDate">2024年1月15日</div>
                <div class="time" id="currentTime">14:28:36</div>
            </div>
        </div>
        
        <div class="nav-tabs">
            <div class="nav-tab active" data-page="overview">
                <i class="fas fa-chart-pie"></i>数据总览
            </div>
            <div class="nav-tab" data-page="sales">
                <i class="fas fa-chart-line"></i>销售分析
            </div>
            <div class="nav-tab" data-page="products">
                <i class="fas fa-coffee"></i>产品分析
            </div>
            <div class="nav-tab" data-page="operations">
                <i class="fas fa-cogs"></i>运营分析
            </div>
        </div>
        
        <!-- 数据总览页面 -->
        <div class="page active" id="overview">
            <div class="stats">
                <div class="stat-card">
                    <i class="fas fa-store"></i>
                    <div class="value" id="storeCount">8</div>
                    <div class="label">监控门店数量</div>
                </div>
                <div class="stat-card">
                    <i class="fas fa-coffee"></i>
                    <div class="value" id="totalSales">35,752<span class="trend up">↑12.8%</span></div>
                    <div class="label">今日总销售额(元)</div>
                </div>
                <div class="stat-card">
                    <i class="fas fa-shopping-cart"></i>
                    <div class="value" id="orderCount">524<span class="trend up">↑8.5%</span></div>
                    <div class="label">今日总订单数</div>
                </div>
                <div class="stat-card">
                    <i class="fas fa-users"></i>
                    <div class="value" id="avgPrice">68.45<span class="trend up">↑3.2%</span></div>
                    <div class="label">平均客单价(元)</div>
                </div>
            </div>
            
            <div class="content">
                <div class="chart-container full-width">
                    <div class="chart-header">
                        <div class="chart-title">门店综合排名 (store_comprehensive_ranking)</div>
                    </div>
                    <div id="storeRankingChart" class="chart"></div>
                </div>
                
                <div class="chart-container">
                    <div class="chart-header">
                        <div class="chart-title">月度销售汇总 (monthly_sales_summary)</div>
                    </div>
                    <div id="monthlySalesChart" class="chart"></div>
                </div>
                
                <div class="chart-container">
                    <div class="chart-header">
                        <div class="chart-title">门店类型对比 (store_type_comparison)</div>
                    </div>
                    <div id="storeTypeChart" class="chart"></div>
                </div>
            </div>
        </div>
        
        <!-- 销售分析页面 -->
        <div class="page" id="sales">
            <div class="content">
                <div class="chart-container full-width">
                    <div class="chart-header">
                        <div class="chart-title">每日销售指标趋势 (daily_sales_metrics)</div>
                    </div>
                    <div id="dailySalesChart" class="chart"></div>
                </div>
                
                <div class="chart-container">
                    <div class="chart-header">
                        <div class="chart-title">销售预测结果 (sales_prediction_result)</div>
                    </div>
                    <div id="salesPredictionChart" class="chart"></div>
                </div>
                
                <div class="chart-container">
                    <div class="chart-header">
                        <div class="chart-title">外部环境影响 (external_environment_data)</div>
                    </div>
                    <div id="externalEnvChart" class="chart"></div>
                </div>
            </div>
        </div>
        
        <!-- 产品分析页面 -->
        <div class="page" id="products">
            <div class="content">
                <div class="chart-container">
                    <div class="chart-header">
                        <div class="chart-title">产品品类销售占比 (product_category_sales)</div>
                    </div>
                    <div id="categorySalesChart" class="chart"></div>
                </div>
                
                <div class="chart-container">
                    <div class="chart-header">
                        <div class="chart-title">热销单品分析 (hot_product_analysis)</div>
                    </div>
                    <div id="hotProductsChart" class="chart"></div>
                </div>
                
                <div class="chart-container full-width">
                    <div class="chart-header">
                        <div class="chart-title">区域口味偏好 (regional_taste_preference)</div>
                    </div>
                    <div id="tastePreferenceChart" class="chart"></div>
                </div>
            </div>
        </div>
        
        <!-- 运营分析页面 -->
        <div class="page" id="operations">
            <div class="content">
                <div class="chart-container">
                    <div class="chart-header">
                        <div class="chart-title">运营效率指标 (operation_efficiency_metrics)</div>
                    </div>
                    <div id="efficiencyChart" class="chart"></div>
                </div>
                
                <div class="chart-container">
                    <div class="chart-header">
                        <div class="chart-title">原料库存预警 (inventory_early_warning)</div>
                    </div>
                    <div id="inventoryChart" class="chart"></div>
                </div>
                
                <div class="chart-container full-width">
                    <div class="chart-header">
                        <div class="chart-title">门店基础信息统计 (store_basic_info)</div>
                    </div>
                    <table class="ranking-table">
                        <thead>
                            <tr>
                                <th>门店名称</th>
                                <th>所在城市</th>
                                <th>门店类型</th>
                                <th>开业日期</th>
                                <th>门店面积(㎡)</th>
                                <th>员工数量</th>
                                <th>店长</th>
                            </tr>
                        </thead>
                        <tbody id="storeInfoTable">
                            <!-- 数据将通过JavaScript动态加载 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        
        <div class="footer">
            <p>数据更新时间: <span id="updateTime">2024-01-15 14:25:00</span> | 蜜雪冰城数据分析中心 版权所有</p>
        </div>
    </div>

    <script>
        // 更新日期和时间
        function updateDateTime() {
            const now = new Date();
            const dateStr = now.getFullYear() + '年' + (now.getMonth() + 1) + '月' + now.getDate() + '日';
            const timeStr = now.getHours().toString().padStart(2, '0') + ':' + 
                           now.getMinutes().toString().padStart(2, '0') + ':' + 
                           now.getSeconds().toString().padStart(2, '0');
            
            document.getElementById('currentDate').textContent = dateStr;
            document.getElementById('currentTime').textContent = timeStr;
        }
        
        // 初始化时间
        updateDateTime();
        setInterval(updateDateTime, 1000);
        
        // 页面切换功能
        document.querySelectorAll('.nav-tab').forEach(tab => {
            tab.addEventListener('click', function() {
                document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
                document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
                
                this.classList.add('active');
                const pageId = this.getAttribute('data-page');
                document.getElementById(pageId).classList.add('active');
                
                setTimeout(() => {
                    window.dispatchEvent(new Event('resize'));
                }, 300);
            });
        });
        
        // 从后端获取数据并更新页面
        async function fetchData() {
            try {
                // 这里应该调用后端API获取真实数据
                // 暂时使用模拟数据
                
                // 更新统计卡片
                document.getElementById('storeCount').innerHTML = '8';
                document.getElementById('totalSales').innerHTML = '35,752<span class="trend up">↑12.8%</span>';
                document.getElementById('orderCount').innerHTML = '524<span class="trend up">↑8.5%</span>';
                document.getElementById('avgPrice').innerHTML = '68.45<span class="trend up">↑3.2%</span>';
                
                // 更新表格数据
                const storeData = [
                    { name: '北京朝阳门店', city: '北京', type: '商圈店', openDate: '2022-03-15', area: '120.5', employees: '8', manager: '张伟' },
                    { name: '上海徐汇店', city: '上海', type: '商圈店', openDate: '2022-05-20', area: '95.0', employees: '6', manager: '李娜' },
                    { name: '南京大学店', city: '南京', type: '校园店', openDate: '2023-01-10', area: '65.0', employees: '4', manager: '王明' },
                    { name: '杭州西湖店', city: '杭州', type: '社区店', openDate: '2022-08-25', area: '85.0', employees: '5', manager: '陈静' },
                    { name: '广州天河店', city: '广州', type: '商圈店', openDate: '2022-11-30', area: '110.0', employees: '7', manager: '黄强' }
                ];
                
                const tableBody = document.getElementById('storeInfoTable');
                tableBody.innerHTML = '';
                storeData.forEach(store => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${store.name}</td>
                        <td>${store.city}</td>
                        <td>${store.type}</td>
                        <td>${store.openDate}</td>
                        <td>${store.area}</td>
                        <td>${store.employees}</td>
                        <td>${store.manager}</td>
                    `;
                    tableBody.appendChild(row);
                });
                
                // 更新图表
                initCharts();
                
                // 更新数据更新时间
                const now = new Date();
                const updateTimeStr = now.getFullYear() + '-' + 
                    (now.getMonth() + 1).toString().padStart(2, '0') + '-' + 
                    now.getDate().toString().padStart(2, '0') + ' ' + 
                    now.getHours().toString().padStart(2, '0') + ':' + 
                    now.getMinutes().toString().padStart(2, '0') + ':' + 
                    now.getSeconds().toString().padStart(2, '0');
                document.getElementById('updateTime').textContent = updateTimeStr;
                
            } catch (error) {
                console.error('获取数据失败:', error);
            }
        }
        
        // 初始化图表
        function initCharts() {
            // 门店综合排名
            const storeRankingChart = echarts.init(document.getElementById('storeRankingChart'));
            const storeRankingOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['销售额', '客单价'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['广州天河店', '北京朝阳门店', '上海徐汇店', '杭州西湖店', '南京大学店'],
                    axisLine: {
                        lineStyle: {
                            color: '#a0c0e0'
                        }
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '销售额(元)',
                        axisLine: {
                            lineStyle: {
                                color: '#a0c0e0'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(160, 192, 224, 0.2)'
                            }
                        }
                    },
                    {
                        type: 'value',
                        name: '客单价(元)',
                        axisLine: {
                            lineStyle: {
                                color: '#a0c0e0'
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: '销售额',
                        type: 'bar',
                        data: [9340.75, 8560.50, 7230.25, 6120.40, 4520.80],
                        itemStyle: {
                            color: '#ff6b6b'
                        }
                    },
                    {
                        name: '客单价',
                        type: 'line',
                        yAxisIndex: 1,
                        data: [69.19, 66.88, 76.11, 69.55, 57.96],
                        lineStyle: {
                            color: '#409eff'
                        },
                        itemStyle: {
                            color: '#409eff'
                        }
                    }
                ]
            };
            storeRankingChart.setOption(storeRankingOption);
            
            // 月度销售汇总
            const monthlySalesChart = echarts.init(document.getElementById('monthlySalesChart'));
            const monthlySalesOption = {
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisLine: {
                        lineStyle: {
                            color: '#a0c0e0'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '销售额(万元)',
                    axisLine: {
                        lineStyle: {
                            color: '#a0c0e0'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(160, 192, 224, 0.2)'
                        }
                    }
                },
                series: [
                    {
                        name: '月度销售额',
                        type: 'line',
                        smooth: true,
                        data: [245.8, 198.5, 125.6, 168.9, 285.6, 320.5, 380.2, 365.8, 298.4, 325.6, 358.7, 420.3],
                        lineStyle: {
                            color: '#ff6b6b'
                        },
                        itemStyle: {
                            color: '#ff6b6b'
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(255, 107, 107, 0.3)' },
                                { offset: 1, color: 'rgba(255, 107, 107, 0.05)' }
                            ])
                        }
                    }
                ]
            };
            monthlySalesChart.setOption(monthlySalesOption);
            
            // 门店类型对比
            const storeTypeChart = echarts.init(document.getElementById('storeTypeChart'));
            const storeTypeOption = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    right: 10,
                    top: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '门店类型',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#0a1a35',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '18',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 7850.50, name: '商圈店', itemStyle: { color: '#ff6b6b' } },
                            { value: 4520.80, name: '校园店', itemStyle: { color: '#409eff' } },
                            { value: 6120.40, name: '社区店', itemStyle: { color: '#67c23a' } }
                        ]
                    }
                ]
            };
            storeTypeChart.setOption(storeTypeOption);
            
            // 每日销售指标
            const dailySalesChart = echarts.init(document.getElementById('dailySalesChart'));
            const dailySalesOption = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['销售额', '订单数', '客单价'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月10日', '1月11日', '1月12日', '1月13日', '1月14日', '1月15日'],
                    axisLine: {
                        lineStyle: {
                            color: '#a0c0e0'
                        }
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '销售额(元)',
                        axisLine: {
                            lineStyle: {
                                color: '#a0c0e0'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(160, 192, 224, 0.2)'
                            }
                        }
                    },
                    {
                        type: 'value',
                        name: '订单数/客单价',
                        axisLine: {
                            lineStyle: {
                                color: '#a0c0e0'
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: '销售额',
                        type: 'line',
                        smooth: true,
                        data: [7200, 7580, 8100, 7850, 8320, 8560],
                        lineStyle: {
                            color: '#ff6b6b'
                        },
                        itemStyle: {
                            color: '#ff6b6b'
                        }
                    },
                    {
                        name: '订单数',
                        type: 'line',
                        yAxisIndex: 1,
                        smooth: true,
                        data: [115, 120, 118, 122, 125, 128],
                        lineStyle: {
                            color: '#409eff'
                        },
                        itemStyle: {
                            color: '#409eff'
                        }
                    },
                    {
                        name: '客单价',
                        type: 'line',
                        yAxisIndex: 1,
                        smooth: true,
                        data: [62.6, 63.2, 68.6, 64.3, 66.6, 66.9],
                        lineStyle: {
                            color: '#67c23a'
                        },
                        itemStyle: {
                            color: '#67c23a'
                        }
                    }
                ]
            };
            dailySalesChart.setOption(dailySalesOption);
            
            // 销售预测结果
            const salesPredictionChart = echarts.init(document.getElementById('salesPredictionChart'));
            const salesPredictionOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    data: ['预测销售额', '实际销售额'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: ['1月13日', '1月14日', '1月15日', '1月16日'],
                        axisLine: {
                            lineStyle: {
                                color: '#a0c0e0'
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#a0c0e0'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(160, 192, 224, 0.1)'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '预测销售额',
                        type: 'line',
                        stack: '总量',
                        smooth: true,
                        lineStyle: {
                            width: 0
                        },
                        showSymbol: false,
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(255, 209, 102, 0.3)'
                                }, {
                                    offset: 1, color: 'rgba(255, 209, 102, 0.05)'
                                }]
                            }
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [7850, 8320, 8560, 8920]
                    },
                    {
                        name: '实际销售额',
                        type: 'line',
                        stack: '总量',
                        smooth: true,
                        lineStyle: {
                            width: 3,
                            color: '#ff6b6b'
                        },
                        showSymbol: false,
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(255, 107, 107, 0.3)'
                                }, {
                                    offset: 1, color: 'rgba(255, 107, 107, 0.05)'
                                }]
                            }
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [7850, 8320, 8560, null]
                    }
                ]
            };
            salesPredictionChart.setOption(salesPredictionOption);
            
            // 外部环境影响
            const externalEnvChart = echarts.init(document.getElementById('externalEnvChart'));
            const externalEnvOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    data: ['平均温度', '人流量指数'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['北京', '上海', '南京', '杭州', '广州'],
                    axisLine: {
                        lineStyle: {
                            color: '#a0c0e0'
                        }
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '温度(℃)',
                        position: 'left',
                        axisLine: {
                            lineStyle: {
                                color: '#a0c0e0'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(160, 192, 224, 0.2)'
                            }
                        }
                    },
                    {
                        type: 'value',
                        name: '人流量指数',
                        position: 'right',
                        axisLine: {
                            lineStyle: {
                                color: '#a0c0e0'
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: '平均温度',
                        type: 'bar',
                        data: [5.5, 8.2, 3.8, 10.5, 18.5],
                        itemStyle: {
                            color: '#ffa36b'
                        }
                    },
                    {
                        name: '人流量指数',
                        type: 'line',
                        yAxisIndex: 1,
                        data: [85.5, 92.3, 78.4, 105.2, 112.8],
                        lineStyle: {
                            color: '#409eff'
                        },
                        itemStyle: {
                            color: '#409eff'
                        }
                    }
                ]
            };
            externalEnvChart.setOption(externalEnvOption);
            
            // 产品品类销售占比
            const categorySalesChart = echarts.init(document.getElementById('categorySalesChart'));
            const categorySalesOption = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    right: 10,
                    top: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '销售占比',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#0a1a35',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '18',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 59.8, name: '茶饮', itemStyle: { color: '#ff6b6b' } },
                            { value: 28.62, name: '咖啡', itemStyle: { color: '#409eff' } },
                            { value: 11.58, name: '冰淇淋', itemStyle: { color: '#ffd166' } }
                        ]
                    }
                ]
            };
            categorySalesChart.setOption(categorySalesOption);
            
            // 热销单品分析
            const hotProductsChart = echarts.init(document.getElementById('hotProductsChart'));
            const hotProductsOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#a0c0e0'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(160, 192, 224, 0.2)'
                        }
                    }
                },
                yAxis: {
                    type: 'category',
                    data: ['珍珠奶茶', '拿铁咖啡', '抹茶冰淇淋', '美式咖啡', '水果茶'],
                    axisLine: {
                        lineStyle: {
                            color: '#a0c0e0'
                        }
                    }
                },
                series: [
                    {
                        name: '销量',
                        type: 'bar',
                        data: [45, 28, 35, 25, 20],
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {offset: 0, color: '#ffa36b'},
                                {offset: 1, color: '#ff6b6b'}
                            ])
                        }
                    }
                ]
            };
            hotProductsChart.setOption(hotProductsOption);
            
            // 区域口味偏好
            const tastePreferenceChart = echarts.init(document.getElementById('tastePreferenceChart'));
            const tastePreferenceOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['茶饮', '咖啡', '冰淇淋'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['华北', '华东', '华南', '西南', '华中'],
                    axisLine: {
                        lineStyle: {
                            color: '#a0c0e0'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '销售占比(%)',
                    axisLine: {
                        lineStyle: {
                            color: '#a0c0e0'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(160, 192, 224, 0.2)'
                        }
                    }
                },
                series: [
                    {
                        name: '茶饮',
                        type: 'bar',
                        stack: 'total',
                        data: [65, 55, 60, 70, 58],
                        itemStyle: {
                            color: '#ff6b6b'
                        }
                    },
                    {
                        name: '咖啡',
                        type: 'bar',
                        stack: 'total',
                        data: [20, 30, 25, 15, 22],
                        itemStyle: {
                            color: '#409eff'
                        }
                    },
                    {
                        name: '冰淇淋',
                        type: 'bar',
                        stack: 'total',
                        data: [15, 15, 15, 15, 20],
                        itemStyle: {
                            color: '#ffd166'
                        }
                    }
                ]
            };
            tastePreferenceChart.setOption(tastePreferenceOption);
            
            // 运营效率指标
            const efficiencyChart = echarts.init(document.getElementById('efficiencyChart'));
            const efficiencyOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                radar: {
                    indicator: [
                        { name: '订单准备时间', max: 100 },
                        { name: '高峰时段效率', max: 100 },
                        { name: '员工生产力', max: 100 },
                        { name: '空间生产力', max: 100 },
                        { name: '设备利用率', max: 100 }
                    ],
                    radius: '65%',
                    splitNumber: 4,
                    axisName: {
                        color: '#a0c0e0',
                        fontSize: 12
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(160, 192, 224, 0.2)'
                        }
                    },
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ['rgba(160, 192, 224, 0.05)', 'rgba(160, 192, 224, 0.02)']
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(160, 192, 224, 0.3)'
                        }
                    }
                },
                series: [
                    {
                        name: '运营效率',
                        type: 'radar',
                        data: [
                            {
                                value: [88.5, 85.2, 92.1, 87.4, 83.6],
                                name: '门店平均',
                                areaStyle: {
                                    color: 'rgba(255, 107, 107, 0.3)'
                                },
                                lineStyle: {
                                    color: '#ff6b6b'
                                },
                                itemStyle: {
                                    color: '#ff6b6b'
                                }
                            }
                        ]
                    }
                ]
            };
            efficiencyChart.setOption(efficiencyOption);
            
            // 原料库存预警
            const inventoryChart = echarts.init(document.getElementById('inventoryChart'));
            const inventoryOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['当前库存', '安全库存'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#a0c0e0'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(160, 192, 224, 0.2)'
                        }
                    }
                },
                yAxis: {
                    type: 'category',
                    data: ['奶茶粉', '咖啡豆', '冰淇淋粉', '糖浆', '杯具'],
                    axisLine: {
                        lineStyle: {
                            color: '#a0c0e0'
                        }
                    }
                },
                series: [
                    {
                        name: '当前库存',
                        type: 'bar',
                        data: [25.5, 18.75, 35.2, 8.5, 1200],
                        itemStyle: {
                            color: function(params) {
                                const value = params.data;
                                if (params.dataIndex === 0 || params.dataIndex === 3 || params.dataIndex === 4) {
                                    return '#f56c6c'; // 红色预警
                                } else if (params.dataIndex === 1) {
                                    return '#e6a23c'; // 黄色预警
                                } else {
                                    return '#67c23a'; // 绿色正常
                                }
                            }
                        }
                    },
                    {
                        name: '安全库存',
                        type: 'bar',
                        data: [15, 12, 20, 10, 2000],
                        itemStyle: {
                            color: 'rgba(160, 192, 224, 0.5)'
                        }
                    }
                ]
            };
            inventoryChart.setOption(inventoryOption);
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            fetchData();
            
            // 窗口大小变化时重新调整图表大小
            window.addEventListener('resize', function() {
                const chartIds = [
                    'storeRankingChart', 'monthlySalesChart', 'storeTypeChart',
                    'dailySalesChart', 'salesPredictionChart', 'externalEnvChart',
                    'categorySalesChart', 'hotProductsChart', 'tastePreferenceChart',
                    'efficiencyChart', 'inventoryChart'
                ];
                
                chartIds.forEach(id => {
                    const chartDom = document.getElementById(id);
                    if (chartDom) {
                        const chart = echarts.getInstanceByDom(chartDom);
                        if (chart) {
                            chart.resize();
                        }
                    }
                });
            });
        });
    </script>
</body>
</html>